<!-- 加入购物车动画 -->
<template>
	<text v-if="isShow" :style="{'top': top, 'left': left, 'transform': transform}"
		class="iconfont add-icon">&#xe612;</text>
</template>

<script setup>
	import { ref, watch } from 'vue';
	import { useShopStore } from '../store.js';

	const store = useShopStore();
	const isShow = ref(false);
	const top = ref('0');
	const left = ref('0');
	const transform = ref('translate(0,0)');

	watch([() => store.animation.start.top, () => store.animation.start.left], (data) => {
		if (typeof data[0] !== 'number' || typeof data[1] !== 'number') { // 起始坐标不为数字时不显示icon
			isShow.value = false;
			return;
		}

		let startTop = data[0];
		let startLeft = data[1];
		const endTop = store.animation.end.top;
		const endLeft = store.animation.end.left;
		top.value = startTop + 'px';
		left.value = startLeft + 'px';
		transform.value = 'translate(0,0)';
		isShow.value = true;

		const x = (endLeft - startLeft) / 100;
		const riseY1 = 10 / 10;
		const riseY2 = 10 / 20;
		const fallY1 = 20 / 20;
		const fallY2 = (endTop - startTop) / 50;

		let times = 0;
		let totalX = 0;
		let totalY = 0;
		const timer = setInterval(() => {
			times++;
			if (times < 10) {
				transform.value = `translate(${totalX += x}px, ${totalY -= riseY1}px)`;
			} else if (times < 30) {
				transform.value = `translate(${totalX += x}px, ${totalY -= riseY2}px)`;
			} else if (times < 50) {
				transform.value = `translate(${totalX += x}px, ${totalY += fallY1}px)`;
			} else {
				transform.value = `translate(${totalX += x}px, ${totalY += fallY2}px)`;
			}
			if (times >= 100) {
				clearInterval(timer);
				isShow.value = false;
				store.SET_ANIMATION_START_POINT(null, null);
			}
		}, 3); // 调速度就改这个时间
	})
</script>

<style lang="scss" scoped>
	.add-icon {
		position: fixed;
		z-index: 99999;
		font-size: 38rpx;
		color: #FE3333;
		background: radial-gradient(white 50%, transparent 50%);
	}
</style>